<template>
  <el-card>
    <div slot="header">{{ isEdit ? '编辑广告' : '新增广告' }}</div>
    <div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-form"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="广告位置">
          <el-select v-model="form.spaceId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.startTime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            placeholder="选择时间"
            v-model="form.endTime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="上线/下线">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">下线</el-radio>
            <el-radio :label="1">上线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告图片">
          <ads-img v-model="form.img"></ads-img>
        </el-form-item>
        <el-form-item label="广告链接" prop="link">
          <el-input v-model="form.link"></el-input>
        </el-form-item>
        <el-form-item label="广告备注">
          <el-input type="textarea" v-model="form.text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="isLoading"
            type="primary"
            @click="submitForm('form')"
            >{{ isEdit ? '保存更新' : '立即创建' }}</el-button
          >
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { getAllSpaces } from '@/service/ads-space'
import { saveOrUpdateAds, getAdById } from '@/service/ads'
import adsImg from './ads-img.vue'
export default {
  components: { adsImg },
  name: 'CreateOrEdit',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    adsId: {
      type: [Number, String]
    }
  },
  data () {
    return {
      isLoading: false,
      form: {
        // id: 0,
        name: '',
        spaceId: '',
        text: '',
        img: '',
        link: '',
        startTime: '',
        endTime: '',
        status: 0
      },
      options: [],
      rules: {
        name: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
        startTime: [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束日期', trigger: 'change' }
        ],
        link: [{ required: true, message: '请填写广告链接', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.loadAllSpace()
    this.loadAds()
  },
  methods: {
    // 加载广告信息
    async loadAds () {
      console.log(this.adsId)
      const { data } = await getAdById({
        id: this.adsId
      })
      if (data.state === 1) {
        this.form = data.content
      }
    },
    // 加载所有广告位
    async loadAllSpace () {
      const { data } = await getAllSpaces()
      if (data.state === 1) {
        this.options = data.content
      }
    },
    async submitForm (formName) {
      try {
        const valid = this.$refs[formName].validate()
        if (valid) {
          this.isLoading = true
          const { data } = await saveOrUpdateAds(this.form)
          if (data.state === 1) {
            this.$message.success(this.isEdit ? '广告编辑成功' : '广告新增成功')
            this.$router.push({ name: 'ads' })
          }
          this.isLoading = false
        }
      } catch (error) {
        console.log(error)
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  text-align: left;
}
::v-deep .el-form-item__content {
  text-align: left;
}
</style>
